import React from 'react';
import Button from 'material-ui/Button';
import Paper from 'material-ui/Paper';
import PropTypes from 'prop-types';

import Typography from 'material-ui/Typography';
import AppBanner from './banner.js';

import { withStyles } from 'material-ui/styles';
import {connect} from 'react-redux';
import Image from '../myfile.jpg';

const styles = theme => ({
    root: {
        color: "white",
        position: "relative",
        height: "auto",
        width: "100%",
       
      
    },
    mainContent:{
        position: "relative",
        top: "-85px",
        textAlign: "center",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center"
    },
    mainContentBlock:{
        position: "relative",
        paddingTop: "25px",
        justifyContent: "center",        
        width: "80%",
        [theme.breakpoints.down('md')]: {
            position: "relative",
            paddingTop: "20px",
           },
    },
    paper: {
    
      textAlign: "center",
      textIndent: "0",
      backgroundColor: "black",
      marginLeft: '10%',
      marginRight: '10%',
      width: "32%",
      display: "block",
      marginTop: "25px", 
      [theme.breakpoints.down('md')]: {
        width: "80%",
        marginLeft: '5%',
        marginRight: '5%',
      },
    },
    papers: {
        display: "flex",
        marginTop: "10px", 
        marginBottom: "20px",
        width: "100%",        
               
        [theme.breakpoints.down('md')]: {
            display: "flex",
            flexDirection: "column",
           marginTop: "5px",        
           marginBottom: "5px", 
        alignItems: "center",
           
           justifyContent: "center",       
           
          },
    },
    papersRound: {
        display: "flex",
        marginTop: "10px", 
        marginBottom: "20px",
        width: "100%",  
        justifyContent: "center",      
               
        [theme.breakpoints.down('md')]: {
           marginTop: "5px",  
           width: "100%",         
           marginBottom: "5px", 
           display: "block",
           position: "relative",
           left: "5%"
           
           
           
          },
    },
    paperRound: {
        width: "120px",
        height: "120px",
        MozTransitionDuration: "0.8s", backgroundColor: "#FFFFFF",
        backgroundPosition: "-30px 50%",
        border: "1px solid #CCCCCC",
        borderRadius: "84px",
        display: "block",
        textAlign: "center",
        textIndent: "0",
        marginLeft: '1%',
        marginRight: '1%',
        marginTop: "25px", 
        [theme.breakpoints.down('md')]: {
            width: "100px",
            height: "100px",
            float: "left", 
            display: "inline-block",
            padding: "10px"
           
          },
      }
   
  });




class Home extends React.Component {
    state = {
        open: false,
        imgSrc: null
      };
    
    handleClose = () => {
        this.setState({
            open: false,
        });
    };

    handleClick = () => {
        this.setState({
            open: true,
        });
    };
    render(){
        console.log(Image);
        
        const { classes, dispatch } = this.props;
        const { open } = this.state;
        return (
            <div className={classes.root}>
              <AppBanner />
              <div className={classes.mainContent}>
                <div className={classes.mainContentBlock} >
                    <Typography className={classes.paper.Typography} style={{color: "white", fontSize: "30px", fontWeight: "bolder"}} variant="headline"  component="h1">
                        启元链的诞生
                    </Typography>
                    <div className={classes.papers}>
                        <Paper className={classes.paper} square={false} elevation={8}>
                            
                            <Typography style={{color: "white", fontSize: "20px"}} component="h3">
                            以比特币为首的区块链项目在这几年取得了巨大成功，无论争议与否，它都像世人证明了这类技术的巨大潜力，而进一步挖掘此类技术的潜力或许是我们的时代任务，。2015年以来，各个不同的区块链项目都想要成为区块链应用的技术上的基础建设。
                            </Typography>
                        </Paper>
                        <Paper className={classes.paper} square={false} elevation={8}>
                            
                            <Typography style={{color: "white", fontSize: "20px"}} component="h3">
                            从以太坊到EOS，但是他们都似乎默认了沿袭比特币暗示的一个观点，币的价值来源于共识，自由主义的信仰以及对精巧软件设计的认同。或许智能合约能够解决很多问题，或许共识出来的价值也是真实存在的，但是我们仍然想要出品一个立即可用的，满足了人类部分需求的系统，来驱动币的价值，
                            由此具备以解决协作关系问题而产生价值的启元链诞生。
                            </Typography>
                        </Paper>
  
                    </div>
                                    
                </div>
                <div className={classes.mainContentBlock}>
       
                    <Typography className={classes.paper.Typography} style={{color: "white", fontSize: "30px", fontWeight: "bolder"}} variant="headline"  component="h3">
                        启元链本身价值的属性
                    </Typography>
                    <div className={classes.papers}>
                        <Paper className={classes.paper} square={false} elevation={8}>
                            
                            <Typography style={{color: "white", fontSize: "20px"}} component="p">
                            <h3>① 公开透明</h3><br/>
                            本软件从核心库都各个端都将发布在github上开源，并且使用MIT协议。在开发过程中将保证使用的其他库也都是开源可信的。
                            </Typography>
                        </Paper>
                        <Paper className={classes.paper} square={false} elevation={8}>
                            
                            <Typography style={{color: "white", fontSize: "20px"}} component="p">
                            <h3>② 去中心化</h3><br/>
                            在基础设施上，本软件选取开源的、分布式去中心化的数据库系统gunjs作为主要数据存储手段，而这个数据库的各个服务端将封装在软件发布的各个客户端内，互相做端口穿透，用以构造整个初心系统的点对点分布式网络
                            </Typography>
                        </Paper>
                        <Paper className={classes.paper} square={false} elevation={8}>
                            
                            <Typography style={{color: "white", fontSize: "20px"}} component="p">
                            <h3>③ 自治性</h3><br/>
                            启元链是一个公共协作体系，访问和下载的软件的，并且拥有终端硬件的都可以参与这个链的发展和壮大。
                            </Typography>
                        </Paper>
                        
  
                    </div>
                    
                </div>
                <div className={classes.mainContentBlock}>
                    
                        <div className={classes.papers}>
                        <Paper className={classes.paper} square={false} elevation={8}>
                            
                            <Typography style={{color: "white", fontSize: "20px"}} component="p">
                            <h3>④ 价值性</h3><br/>
                            启元链的使用价值是我们最大的优势．我们不仅仅由比特币的所有使用价值，并且在金融性上更加便捷可靠．这方面详细介绍见白皮书。
                            </Typography>
                        </Paper>
                        <Paper className={classes.paper} square={false} elevation={8}>
                            
                            <Typography style={{color: "white", fontSize: "20px"}} component="p">
                            <h3>⑤自相似性</h3><br/>
                            
启元链的软件架构不同于其他区块链项目的一个重要的特色是，我们是完全端对端的，没有矿机或者私有链的概念。
                            </Typography>
                        </Paper>
  
                    </div>
                    </div>
                    <div className={classes.mainContentBlock}>
                    <Typography className={classes.paper.Typography} style={{color: "white", fontSize: "30px", fontWeight: "bolder"}} variant="headline"  component="h3">
                    真正的虚拟数字货币的属性
                    </Typography>
                      <div className={classes.papers}>
                      <Paper className={classes.paper} square={false} elevation={8}>
                          
                          <Typography style={{color: "white", fontSize: "20px"}} component="p">
                          <h3> ① 衡量发行</h3><br/>
                         
启元币全球衡量发行7300万枚，全球首发2048万枚，每发行四分之一算力减半，直到7300万发行完毕永不增发。
                          </Typography>
                      </Paper>
                      <Paper className={classes.paper} square={false} elevation={8}>
                          
                          <Typography style={{color: "white", fontSize: "20px"}} component="p">
                          <h3>② 先进的密码学安全</h3><br/>
                          
                          
依靠密码学技术，无需中间人，保证交易安全和可信的身份识别。
                          </Typography>
                      </Paper>
                      <Paper className={classes.paper} square={false} elevation={8}>
                          
                          <Typography style={{color: "white", fontSize: "20px"}} component="p">
                          <h3> ③ 独立的电子钱包</h3><br/>
                         
真正的虚拟数字都有自己独立的电子钱包，钱包地址是由一串数字和英文字母组成的，好比我们的银行卡号。
                          </Typography>
                      </Paper>

                  </div>
                  
                
                </div>
                <div className={classes.mainContentBlock}>
                      
                      <div className={classes.papers}>
                      <Paper className={classes.paper} square={false} elevation={8}>
                          
                          <Typography style={{color: "white", fontSize: "20px"}} component="p">
                          <h3> ④点对点</h3><br/>
                         
                          </Typography>
                      </Paper>
                      <Paper className={classes.paper} square={false} elevation={8}>
                          
                          <Typography style={{color: "white", fontSize: "20px"}} component="p">
                          <h3> ⑤ 去中心化</h3><br/>
                          
不受任何国家、组织、部门、公司、个人掌控操作，没有公司、没有老板，不融资、不融币，完全市场自由化。
                          </Typography>
                      </Paper>
                      <Paper className={classes.paper} square={false} elevation={8}>
                          
                          <Typography style={{color: "white", fontSize: "20px"}} component="p">
                          <h3>⑥ 流通</h3><br/>
                          
                          
货币本身就是用来流通、持有、易物的，没有流通，没有需求就没有价值。
                          </Typography>
                      </Paper>

                  </div>
                
                </div>

                <div className={classes.mainContentBlock}>
                    <Typography className={classes.paper.Typography} style={{color: "white", fontSize: "30px", fontWeight: "bolder"}} variant="headline"  component="h3">
                        联系我们
                    </Typography>
                          
                          <Typography style={{color: "white", fontSize: "20px"}} component="p">
                          <h3> 微信号： panf1119</h3><br/>
                          </Typography>
                    
                      

                
                </div>
            </div>
             
          </div>
        )
    }
}
Home.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  function mapUserState(state){
      return {
          user: state.AppUser
      }
  }
  
export default connect(mapUserState)(withStyles(styles)(Home));